<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>日程框架</title>
    <!-- Custom fonts for this template-->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <!-- Page level plugin CSS-->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.css}" rel="stylesheet">
    <!-- Custom styles for this template-->
    <link th:href="@{/css/sb-admin.css}" rel="stylesheet">
    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>
    <!-- Page level plugin JavaScript-->
    <script th:src="@{/vendor/datatables/jquery.dataTables.js}"></script>
    <script th:src="@{/vendor/datatables/dataTables.bootstrap4.js}"></script>
    <!-- Custom scripts for all pages-->
    <script th:src="@{/js/sb-admin.min.js}"></script>
    <!-- Demo scripts for this page-->
    <script th:src="@{../js/demo/datatables-demo.js}"></script>
</head>
<body  id="page-top">


<nav class="navbar navbar-expand navbar-dark bg-dark static-top">

    <a class="navbar-brand mr-1" th:href="@{/user/index}">日程云共享管理系统</a>


    <!-- Navbar -->
    <ul class="navbar-nav ml-auto ml-md-12">

        <div th:if="${session.loginUser!=null}">
            <p th:text="${session.loginUser.getUsername()}" style="color:white"> </p>
        </div>
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user-circle fa-fw"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">个人设置</a>
                <a class="dropdown-item" th:href="@{/reset-password}">修改密码</a>
                <div class="dropdown-divider"></div>
                <div th:if="${session.loginUser!=null}">
                    <a class="dropdown-item" th:href="@{/logout}" data-toggle="modal" data-target="#logoutModal">注销</a>
                </div>
            </div>
        </li>
    </ul>

</nav>

<div id="wrapper">

    <!-- Sidebar -->
    <ul class="sidebar navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/share/community}">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>用户共享社区</span></a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" th:href="@{/user/toScheduleframework}">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>日程框架</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/scheduletable/toScheduletable}">
                <i class="fas fa-fw fa-table"></i>
                <span>日程表</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/scheduletemplate/toTemplate}">
                <i class="fas fa-fw fa-table"></i>
                <span>日程模版</span></a>
        </li>
        <li class="nav-item " shiro:hasRole="admin">
            <a class="nav-link" th:href="@{/admin/list}">
                <i class="fas fa-fw fa-table"></i>
                <span>用户列表</span></a>
        </li>
    </ul>

    <div id="content-wrapper">

        <div class="container-fluid">

            <!-- Breadcrumbs-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Dashboard</a>
                </li>
                <li class="breadcrumb-item active">日程框架</li>
            </ol>



            <!-- Page Content -->

            <div class="card mb-3">
                <div class="card-header">
                    <i class="fas fa-table"></i>
                    日程框架
                    <!-- 搜索 -->
                    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0" method="get" th:action="@{/user/searchFramework}">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" name="value">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                    <div style="float: right">
<!--                        <a class="btn btn-primary btn-sm" th:href="@{/user/addFramework}" >添加日程框架</a>-->
                        <button class="btn btn-primary btn-sm"  id="framework_add_modal_btn">添加日程框架</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-responsive-xl text-nowrap">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>创建者</th>
                                    <th>日程框架名</th>
                                    <th>组织</th>
                                    <th>创建时间</th>
                                    <th>开始日期</th>
                                    <th>结束日期</th>
                                    <th>当前状态</th>
                                    <th>操作</th>
                                    <th>发布</th>
                                    <th>共享</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="framework:${msg.get('page').list}">
                                    <th th:text="${framework.getId()}">id</th>
                                    <th th:if="${session.loginUser!=null}" th:text="${session.loginUser.getUsername()}">创建者</th>
                                    <th th:text="${framework.getName()}">日程框架名</th>
                                    <th th:text="${framework.getOrganization()}">组织</th>
                                    <th th:text="${#dates.format(framework.getCreateTime(),'yyyy-MM-dd HH:mm')}">创建时间</th>
                                    <th th:text="${#dates.format(framework.getStartDate(),'yyyy-MM-dd')}">开始日期</th>
                                    <th th:text="${#dates.format(framework.getEndDate(),'yyyy-MM-dd')}">结束日期</th>
<!--                                    <th th:text="${framework.getDraftState()==1&&framework.getPublishState()==0?'草稿':'已发布'}">当前状态</th>-->
                                    <th th:if="${framework.getDraftState()==1&&framework.getPublishState()==0}">
                                        <span >草稿</span>
                                    </th>
                                    <th th:if="${framework.getDraftState()==0&&framework.getPublishState()==1}">
                                        <span >发布</span>
                                    </th>
                                    <th th:if="${framework.getDraftState()==0&&framework.getPublishState()==0}">
                                        <span >关闭</span>
                                    </th>
                                    <th>
                                        <button class="btn btn-primary btn-sm fview_btn" th:attr="view-id=${framework.getId()}">查看</button>
<!--                                        <a class="btn btn-primary btn-sm " th:href="@{'/user/update/'+${framework.getId()}}" th:classappend="${framework.getPublishState()==1?'disabled':''}">修改</a>-->
                                        <button class="btn btn-primary btn-sm edit_btn" th:attr="edit-id=${framework.getId()}"  th:attrappend="disabled=${framework.getDraftState()==0?'disabled':''}">修改</button>
                                        <a class="btn btn-primary btn-sm " th:href="@{'/share/copy/'+${framework.getId()}}">复制</a>
                                    </th>
                                    <th>
                                        <a class="btn btn-primary btn-sm " th:text="${framework.getPublishState()==1?'关闭':'发布'}"
                                           th:href="@{'/share/publish/'+${framework.getId()}+'?flag='+${framework.getPublishState()==1?'flase':'true'}}"
                                           th:classappend="${framework.getShareState()==1?'disabled':''}" >发布</a>
                                    </th>
                                    <th><a class="btn btn-primary btn-sm " th:text="${framework.getShareState()==0?'开放共享':'取消共享'}"
                                           th:href="@{'/share/share/'+${framework.getId()}+'?flag='+${framework.getShareState()==1?'flase':'true'}}" th:classappend="${framework.getDraftState()==1?'disabled':''}">取消共享</a>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            <div class="card-footer small text-muted" th:each="page:${msg.get('page')}">
                <ul class="col-md-6">
                    当前第[[${page.list.pageNum}]]页，总[[${page.list.pages}]]页，总[[${page.list.total}]]条记录
                </ul>
                <nav aria-label="Page navigation example" style="float:right">
                    <ul class="pagination">
                        <li>
                        <li class="page-item"><a class="page-link" th:href="@{/user/toScheduleframework}">首页</a></li>
                        </li>
                        <div>
                            <div class="clearfix">
                                <ul class="pagination m-b-5 pull-right">
                                    <li th:if="${page.hasPreviousPage}" class="page-item">
                                        <a class="page-link" th:href="@{'/user/toScheduleframework?pageNum='+${page.prePage}}" >
                                            <i class="fa fa-angle-left"></i>上一页
                                        </a>
                                    </li>
                                    <th:block th:each="nav:${page.navigatepageNums}">
                                        <li class="page-item" th:classappend="${nav==page.list.pageNum}?'active':''">
                                            <a class="page-link" th:text="${nav}" th:href="@{'/user/toScheduleframework?pageNum='+${nav}}"></a>
                                        </li>
                                    </th:block>
                                    <th:block th:if="${page.hasNextPage}">
                                        <li class="page-item">
                                            <a class="page-link" th:href="@{'/user/toScheduleframework?pageNum='+${page.nextPage}}">
                                                下一页<i class="fa fa-angle-right"></i>
                                            </a>
                                        </li>
                                    </th:block>
                                </ul>
                            </div>
                        </div>
                        <li>
                            <li class="page-item"><a class="page-link" th:href="@{'/user/toScheduleframework?pageNum='+${page.list.pages}}">末页</a></li>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        </div>
    </div>

        </div>
        <!-- /.container-fluid -->

        <!-- Sticky Footer -->
        <footer class="sticky-footer">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright © Your Website 2019</span>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">确定退出登录吗?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">如果您准备结束当前会话，请在下面选择“退出”。</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" th:href="@{/logout}">退出</a>
            </div>
        </div>
    </div>
</div>

<!--添加日程框架的模态框-->
<div class="modal " id="frameworkAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程框架添加</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" th:action="@{/user/createFramework}" >
                    <div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="name" class="form-control" placeholder="日程框架名" required autofocus="autofocus" th:field="*{sfVO.name}">
                                        <label for="name" >日程框架名*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="organization" class="form-control" placeholder="组织" required th:field="*{sfVO.organization}">
                                        <label for="organization">组织*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="date" id="startDate" class="form-control" placeholder="开始日期" required autofocus="autofocus" th:field="*{sfVO.startDate}">
                                        <label for="startDate" >开始日期*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="date" id="endDate" class="form-control" placeholder="结束日期" required autofocus="autofocus" th:field="*{sfVO.endDate}">
                                        <label for="endDate" >结束日期*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <p style="color: red" class="lead">以下是日程框架项部分
                            <button class="btn btn-primary btn-lg" style="float: right" type="button" id="add">点击继续添加</button></p>
                        <br>
                    </div>

                    <div id="term" th:object="${stVO}">
                        <!--   第一行    -->
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <input type="text" id="orderNum0" class="form-control" placeholder="序号*(只能输入纯数字)" required autofocus="autofocus" th:field="*{stVOS[0].orderNum}">
                                        <label for="orderNum0" >序号*(只能输入纯数字)</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <input type="time" id="startTime0" class="form-control" placeholder="开始时间"  autofocus="autofocus" th:field="*{stVOS[0].startTime}">
                                        <label for="startTime0" >开始时间</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <input type="time" id="endTime0" class="form-control" placeholder="结束时间"  autofocus="autofocus" th:field="*{stVOS[0].endTime}">
                                        <label for="endTime0" >结束时间</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <button type="submit" class="btn btn-primary btn-lg" >保存</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!--修改日程框架的模态框-->
<div class="modal " id="frameworkupdateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程框架修改</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" th:action="@{/user/updateFramework}" >
                    <div>
                        <div class="form-group" hidden>
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="edit_id" class="form-control" placeholder="id" required autofocus="autofocus" th:field="*{sfVO.id}">
                                        <label for="edit_id" >id*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="edit_name" class="form-control" placeholder="日程框架名" required  th:field="*{sfVO.name}">
                                        <label for="edit_name" >日程框架名*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="text" id="edit_organization" class="form-control" placeholder="组织" required th:field="*{sfVO.organization}">
                                        <label for="edit_organization">组织*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="date" id="edit_startDate" class="form-control" placeholder="开始日期" required autofocus="autofocus"  th:field="*{sfVO.startDate}">
                                        <label for="edit_startDate" >开始日期*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-6">
                                    <div class="form-label-group">
                                        <input type="date" id="edit_endDate" class="form-control" placeholder="结束日期" required autofocus="autofocus"  th:field="*{sfVO.endDate}">
                                        <label for="edit_endDate" >结束日期*</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <p style="color: red" class="lead">以下是日程框架项部分
                            <button class="btn btn-primary btn-lg" style="float: right" type="button" id="edit_add">点击继续添加</button></p>
                        <br>
                    </div>

                    <div id="edit_term" th:object="${stVO}">
                        <!--   第一行    -->
                        <div class="form-group">
                            <div class="form-row">
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <input type="text" id="edit_orderNum0" class="form-control" placeholder="序号(只能输入纯数字)"  autofocus="autofocus" th:field="*{stVOS[0].orderNum}">
                                        <label for="edit_orderNum0" >序号(只能输入纯数字)</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <input type="time" id="edit_startTime0" class="form-control" placeholder="开始时间"  autofocus="autofocus" th:field="*{stVOS[0].startTime}">
                                        <label for="edit_startTime0" >开始时间</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <input type="time" id="edit_endTime0" class="form-control" placeholder="结束时间"  autofocus="autofocus" th:field="*{stVOS[0].endTime}">
                                        <label for="edit_endTime0" >结束时间</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <button type="submit" class="btn btn-primary btn-lg" >保存</button>
                </form>
            </div>
        </div>
    </div>
</div>

</body>

<script>

    var index=1;

    $(function () {
        $("#add").click(function () {
            $("#term").append("<div class='form-group'>\n" +
                "<div class='form-row'>\n" +
                "<div class='col-md-4'>\n" +
                "<div class='form-label-group'>\n" +
                "<input type='text' id='orderNum"+index+" ' class='form-control' placeholder='序号(只能输入纯数字)'  autofocus='autofocus' name='stVOS["+index+"].orderNum'>\n" +
                "<label for='orderNum"+index+" ' >序号(只能输入纯数字)</label>\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class='col-md-4'>\n" +
                "<div class='form-label-group'>\n" +
                "<input type='time' id='startTime"+index+" ' class='form-control' placeholder='开始时间'  autofocus='autofocus' name='stVOS["+index+"].startTime'>\n" +
                "<label for='startTime"+index+" ' >开始时间</label>\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class='col-md-4'>\n" +
                "<div class='form-label-group'>\n" +
                "<input type='time' id='endTime"+index+" ' class='form-control' placeholder='结束时间'  autofocus='autofocus' name='stVOS["+index+"].endTime'>\n" +
                "<label for='endTime"+index+" ' >结束时间</label>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>"
            );
            index++;
        });
    });

    var edit_index=1;

    $(function () {
        $("#edit_add").click(function () {
            $("#edit_term").append("<div class='form-group'>\n" +
                "<div class='form-row'>\n" +
                "<div class='col-md-4'>\n" +
                "<div class='form-label-group'>\n" +
                "<input type='text' id='edit_orderNum"+edit_index+" ' class='form-control' placeholder='序号(只能输入纯数字)'  autofocus='autofocus' name='stVOS["+edit_index+"].orderNum'>\n" +
                "<label for='edit_orderNum"+edit_index+" ' >序号(只能输入纯数字)</label>\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class='col-md-4'>\n" +
                "<div class='form-label-group'>\n" +
                "<input type='time' id='edit_startTime"+edit_index+" ' class='form-control' placeholder='开始时间'  autofocus='autofocus' name='stVOS["+edit_index+"].startTime'>\n" +
                "<label for='edit_startTime"+edit_index+" ' >开始时间</label>\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class='col-md-4'>\n" +
                "<div class='form-label-group'>\n" +
                "<input type='time' id='edit_endTime"+edit_index+" ' class='form-control' placeholder='结束时间'  autofocus='autofocus' name='stVOS["+edit_index+"].endTime'>\n" +
                "<label for='edit_endTime"+edit_index+" ' >结束时间</label>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>"
            );
            edit_index++;
        });
    });

    //点击添加日程框架，打开模态框
    $("#framework_add_modal_btn").click(function () {
        $('#frameworkAddModal').modal({
            backdrop: "static"
        });
    });

    //点击修改日程框架，打开模态框
    $(document).on("click",".edit_btn",function () {
        $.ajax({
           url:"http://localhost:8088/user/getFramework/"+$(this).attr("edit-id"),
           type:"GET",
           success:function (result) {
               // console.log(result);
               var data=result.extend.sfVO;
               $("#edit_id").val(data.id);
               $("#edit_name").val(data.name);
               $("#edit_organization").val(data.organization);
               $("#edit_startDate").val(data.startDate);
               $("#edit_endDate").val(data.endDate);
               console.log(result.extend.stVOS);
           }
        });
        $("#frameworkupdateModal").modal({
            backdrop:"static"
        });
    });

    //点击查看日程框架按钮，跳转页面
    $(document).on("click",".fview_btn",function () {
        var scheduleframeworkId=$(this).attr("view-id");
        $.ajax({
            success : function(msg){
                window.location.href="http://localhost:8088/user/view/"+scheduleframeworkId;
            }
        });
    })

</script>

</html>